<ui:composition template="../templates/3-layoutTemplate.xhtml" xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:c="http://java.sun.com/jsp/jstl/core">

    <ui:define name="content-middle">
        <script type="text/javascript"
          src="https://c328740.ssl.cf1.rackcdn.com/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
        </script>                                            
        <script type="text/x-mathjax-config">
          MathJax.Hub.Config({
            tex2jax: {
              inlineMath: [["$","$"],["\\(","\\)"]]
            }
          });
        </script>        
        <h:form>
        <div align="center" >
            
            <div style="width:1070px; height: 600px; border: 0px solid #036fab;">
                <div style="float: right;">
                    <p:commandButton process="@this" value="Take me to my Dashboard..." action="#{questionBoardBean.toDashBoard}" ajax="true" />                    
                </div>
                <div style="color:#DC8700;font-size: 2.0em;text-align: left;">
                    <p>#{questionBoardBean.examType} Session is completed, please verify and memorize the correct answers listed below</p>
                </div>
                <div style="float:left; min-height: 300px; border: 0px solid #036fab;">
                    <table width="100%">
                        <c:forEach var="qn" items="#{questionBoardBean.questionsList}">
                            <tr>
                                <td>
                                    <div style="border: 1px solid #AFAFAF; min-height: 150px;padding: 10px;">

                                        <div style="min-height: 120px;overflow: auto;"> 
                                            <div style="float: right;min-height: 100px; text-align: left;">

                                                <div>
                                                    <div style="float: left;padding:5px; text-align: center; border: 1px solid #DC8700; font-size: 3em; width:40px; ">
                                                        #{qn.rownum}
                                                    </div>
                                                    <div style="width:970px; float: right;padding-bottom: 10px;border-bottom: 1px solid #DC8700; margin-left: 20px;">
                                                        #{qn.question}
                                                    </div>
                                                </div>
                                                <div style="padding: 10px 0px 10px 0px;min-height: 100px;border: 0px solid;">
                                                    <h:panelGrid columns="4" style="margin-bottom:10px" cellpadding="5">
                                                        <div style="color:green;float: left;
                                                             margin-left: 30px;"> Correct Answers 
                                                        <p:selectOneRadio value="#{qn.answer}" layout="grid" columns="2" disabled="true"
                                                                          style="border-left: 1px solid green;"> 
                                                            <f:selectItem itemLabel="a) #{qn.option1}" itemValue="a" />
                                                            <f:selectItem itemLabel="b) #{qn.option2}" itemValue="b" />
                                                            <f:selectItem itemLabel="c) #{qn.option3}" itemValue="c" />
                                                            <f:selectItem itemLabel="d) #{qn.option4}" itemValue="d" />
                                                            <f:selectItem itemLabel="e) #{qn.option5}" itemValue="e" />
                                                        </p:selectOneRadio>
                                                        </div>
                                                        <div style="color: red;float: right;
                                                             margin-left: 30px;"> Your Answers
                                                        <p:selectOneRadio value="#{qn.userSelectedAnswer}" layout="grid" columns="2" disabled="true"
                                                                          style="border-left: 1px solid red;"> 
                                                            <f:selectItem itemLabel="a) #{qn.option1}" itemValue="a" />
                                                            <f:selectItem itemLabel="b) #{qn.option2}" itemValue="b" />
                                                            <f:selectItem itemLabel="c) #{qn.option3}" itemValue="c" />
                                                            <f:selectItem itemLabel="d) #{qn.option4}" itemValue="d" />
                                                            <f:selectItem itemLabel="e) #{qn.option5}" itemValue="e" />
                                                        </p:selectOneRadio>   
                                                        </div>  
                                                    </h:panelGrid>
                                                </div>
                                            </div>
                                        </div > 

                                    </div>
                                </td>
                            </tr>
                        </c:forEach>
                    </table>
                </div>




            </div>       
        </div>

    </h:form>
    </ui:define>

</ui:composition>